<template>
  <div>
    <button @click="onAdd">加入购物车</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      goodsList: [
        {
          id: 'pro_f66697ca-acad-496b-90d9-c91bec0512d5',
          img: 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg',
          name: 'Apple iPhone15',
          price: 4999,
          num: 1,
          checked: true
        },
        {
          id: 'pro_0745ecc5-fbf4-438c-b6ad-89602b0a8913',
          img: 'http://img12.360buyimg.com/n1/jfs/t1/125178/7/16502/43895/5f9a653cEb261b37f/feebe84826ae1cfc.jpg',
          name: '米家洗衣机',
          price: 2999,
          num: 1,
          checked: true
        },
        {
          id: 'pro_6ec536ac-7c14-4c3a-a65b-2c6377dab7a2',
          img: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i1/755579902/O1CN01OtNTQk2N1ATlHy6xO_!!755579902.jpg_430x430q90.jpg',
          name: '卡姿兰大眼睛',
          price: 199,
          num: 1,
          checked: true
        }
      ]
    }
  },
  methods: {
    /**
     * 参数1：模块名
     * 参数2：数组（mutations的方法）
     */
    ...mapMutations('cart', ['addToCart']),
    onAdd () {
      const index = parseInt(Math.random() * 10) % 3

      // this.addToCart(this.goodsList[index])
      this.addToCart({ ...this.goodsList[index] })
    }
  }
}
</script>
